* {
    padding: 0;
    margin: 0;
}
.box {
    width: 100vw;
    height: 100vh;
    background-color: #f9fafc;
    .content {
        width: 70vw;
        height: 70vh;
        background-color: #ffe6e6;
        display: flex;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        padding: 20px 20px 20px 50px;
        .content-left {
            flex: 1;
            padding: 50px;
            box-sizing: border-box;
            color: #8b5454;
            .left-wrapper {
                width: 80%;
                .tips {
                    color: #8b5454;
                    margin-bottom: 50px;
                    h1 {
                        margin: 10px 0;
                    }
                    span {
                        display: block;
                    }
                }
                .form-wrapper {
                    margin-bottom: 50px;
                    .ipt {
                        width: 100%;
                        height: 50px;
                        border-radius: 10px;
                        border: 1px solid #e6c4c4;
                        margin-bottom: 30px;
                        padding: 10px;
                        font-size: 20px;
                        box-sizing: border-box;
                        outline: none;
                        transition: .3s;
                        &:focus {
                            border: 1px solid #794444;
                        }
                        &::-webkit-input-placeholder {
                            font-weight: 100;
                        }
                    }
                    .btn {
                        width: 100%;
                        height: 50px;
                        border-radius: 10px;
                        font-size: 20px;
                        color: #fff;
                        background-color: #f393a8;
                        cursor: pointer;
                        border: 0;
                        transition: .3s;
                        &:hover {
                            background-color: #f37893;
                        }
                    }
                }
                .other-login {
                    width: 100%;
                    height: 50px;
                    border-radius: 10px;
                    border: 2px solid #e0b7b7;
                    font-size: 20px;
                    background-color: #fff;
                    text-align: center;
                    line-height: 50px;
                    margin-bottom: 30px;
                    cursor: pointer;
                    transition: .3s;
                    img {
                        width: 30px;
                        height: 30px;
                        vertical-align: middle;
                    }
                    &:hover {
                        background-color: #ffe6e6;
                    }
                }
                .forgot-pwd {
                    margin-bottom: 30px;
                    cursor: pointer;
                }
                .line {
                    width: 100%;
                    height: 2px;
                    background-color: #DFB7B7;
                    margin-bottom: 30px;
                }
                .resgister {
                    .reg-btn {
                        width: 80px;
                        height: 40px;
                        border-radius: 15px;
                        border: 2px solid #e0b7b7;
                        background-color: #fff;
                        text-align: center;
                        color: #794444;
                        font-weight: 600;
                        cursor: pointer;
                        transition: .3s;
                        &:hover {
                            background-color: #ffe6e6;
                        }
                    }
                }
            }
        }
        .content-right {
            flex: 1;
            .right-box {
                width: 100%;
                height: 100%;
                background-color: #f393a8;
                border-radius: 20px;
                position: relative;
                #canvas3d {
                    border-radius: 20px;
                    opacity: 0;
                }
                .loadding {
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    opacity: 1;
                    transform: .3s;
                    animation: rotate 1s linear infinite;
                }
            }
        }
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}